<template>
  <div class="Coupon">
    <van-coupon-list
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      :disabled-coupons="disabledCoupons"
      :show-close-button="useBtn"
      @change="onChange"
      @exchange="onExchange"
    />
  </div>
</template>

<script>
const coupon = [
  {
    available: 1,
    condition: "无使用门槛\n最多优惠12元",
    reason: "",
    value: 150,
    name: "优惠券名称",
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: "1.5",
    unitDesc: "元"
  },
  {
    available: 1,
    condition: "无使用门槛\n",
    reason: "",
    value: 20000,
    name: "全场无门槛200元",
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: "200",
    unitDesc: "元"
  }
];
export default {
  props: {
    useBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chosenCoupon: -1,
      coupons: coupon,
      disabledCoupons: []
    };
  },
  methods: {
    onChange(index) {
      this.chosenCoupon = index;
    },
    onExchange(code) {
      let data = {
        available: 1,
        condition: "无使用门槛\n",
        reason: "",
        value: 150,
        name: "全场1折使用",
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: "1",
        unitDesc: "折"
      };
      this.coupons.push(data);
    }
  }
};
</script>

<style lang="less" scoped>
.Coupon {
  /deep/.van-coupon-list__bottom {
    bottom: 5.4vh;
  }
  /deep/.van-coupon-list__list--with-bottom {
    padding-bottom: 96px;
  }
}
</style>